import { defineComponent, watch, ref } from 'vue'
import * as echarts from 'echarts'
// 声明类型
const PropsType = {
  cdata: {
    type: Object,
    require: true
  }
} as const

// 定义主体
export default defineComponent({
  props: PropsType,
  setup(props) {
    // 定义 ref
    const chartRef = ref()
    // 配置项
    let options = {}

    // 监听
    watch(
        () => props.cdata,
        (val: any) => {
          options = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              backgroundColor: 'rgba(15, 55, 95, 0.9)',
              borderColor: '#3385ff',
              borderWidth: 1,
              textStyle: {
                color: '#fff'
              },
              formatter: function(params) {
                let result = `<div style="font-weight:bold">${params[0].axisValue}</div>`;
                params.forEach(item => {
                  if ([0, 3].includes(item.seriesIndex)) {
                    result += `<div>${item.seriesName}: ${item.value} kWh</div>`;
                  } else if(item.seriesIndex === 2) {
                    result += `<div>${item.seriesName}: ${item.value} 元</div>`;
                  }
                  else {
                    result += `<div>${item.seriesName}: ${item.value} 元/kwh</div>`;
                  }
                  // result += `<div>${item.seriesName}: ${item.value}${item.seriesIndex === (0  || 3 ) ? ' kWh' :' 元'}</div>`;
                });
                return result;
              }
            },
            legend: {
              data: ['发电量', '单位电价', '电费','用电量'], // 图例显示的名称，对应series中的name
              textStyle: {
                color: '#ccc'
              },
              top: '5%'
            },
            grid: {
              top: '15%',
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              data: val.hours,  //x轴数据
              axisLine: {
                lineStyle: {
                  color: '#ccc'
                }
              },
              axisTick: {
                show: true,
                alignWithLabel: true,
                lineStyle: {
                  color: '#ccc'
                }
              },
              axisLabel: {
                  color: '#ccc'
              }
            },
            yAxis: [
              {
                name: '电量',
                type: 'value',
                min:0,
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: 'rgba(255, 255, 255, 0.1)'
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: '#ccc'
                  }
                },
                axisTick: {
                  lineStyle: {
                    color: '#ccc'
                  }
                },
                axisLabel: {
                  textStyle: {
                    color: '#ccc',
                    formatter: '{value} kWh'
                  }
                }
              },
              {
                name: '单位电价',
                type: 'value',
                splitLine: {
                  show: false
                },
                axisLine: {
                  lineStyle: {
                    color: '#ccc'
                  }
                },
                axisTick: {
                  lineStyle: {
                    color: '#ccc'
                  }
                },
                axisLabel: {
                  textStyle: {
                    color: '#ccc',
                    formatter: '{value} 元/kWh'
                  }
                }
              },
              {
                name: '电费',
                type: 'value',
                splitLine: {
                  show: false
                },
                axisLine: {
                  lineStyle: {
                    color: '#ccc'
                  }
                },
                axisTick: {
                  lineStyle: {
                    color: '#ccc'
                  }
                },
                axisLabel: {
                  textStyle: {
                    color: '#ccc',
                    formatter: '{value} 元'
                  }
                },
                position: 'right',
                offset: 50
              },
              // {
              //   name: '负荷',
              //   type: 'value',
              //   splitLine: {
              //     show: false
              //   },
              //   axisLine: {
              //     lineStyle: {
              //       color: '#ccc'
              //     }
              //   },
              //   axisTick: {
              //     lineStyle: {
              //       color: '#ccc'
              //     }
              //   },
              //   axisLabel: {
              //     textStyle: {
              //       color: '#ccc',
              //       formatter: '{value} kwh'
              //     }
              //   },
              //   position: 'right',
              //   offset: 50
              // },
            ],
            series: [
              {
                name: '发电量',
                type: 'bar',
                barWidth: '30%', // 调整柱状图宽度
                yAxisIndex: 0,
                itemStyle: {
                  borderRadius: 5,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#14c8d4' },
                    { offset: 1, color: '#43eec6' },
                  ])
                },
                data: val.powerConsumption
              },
              {
                name: '单位电价',
                type: 'bar',
                barWidth: '30%', // 调整柱状图宽度
                yAxisIndex: 1,
                itemStyle: {
                  borderRadius: 5,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#58a9d7' },
                    { offset: 1, color: '#9559cc' },
                  ])
                },
                data: val.unitPrice
              },
              {
                name: '电费',
                type: 'line',
                yAxisIndex: 2,
                smooth: true,
                showAllSymbol: true,
                symbol: 'emptyCircle',
                symbolSize: 8,
                itemStyle: {
                  color: '#eede7c'
                },
                lineStyle: {
                  width: 3,
                  color: '#c4cc6b'
                },
                data: val.electricityCost
              },
              {
                name: '用电量',
                type: 'line',
                yAxisIndex: 0,
                smooth: true,
                showAllSymbol: true,
                symbol: 'emptyCircle',
                symbolSize: 8,
                itemStyle: {
                  color: '#e03b4e'
                },
                lineStyle: {
                  width: 3,
                  color: '#860307'
                },
                data: val.actualLoad
              }
            ]
          };
          // 手动触发更新
          if (chartRef.value) {
            // 通过初始化参数打入数据
            chartRef.value.initChart(options)
          }
        },
        {
          immediate: true,
          deep: true
        }
    )

    return () => {
      const height = "450px"
      const width = "100%"

      return <div>
        <echart ref={chartRef} options={options} height={height} width={width} />
      </div>
    }
  }
})
